<!--
  Generated template for the PolicyListPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

    <ion-toolbar content-page class="fir-toolbar">
        <!--<ion-buttons start>-->
            <!--<button ion-button icon-only (click)="goBack()">-->
                <!--<i class="toolbar-back"></i>-->
            <!--</button>-->
        <!--</ion-buttons>-->
        <ion-title>
            个险保单列表
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>

    <div class="head-bar">
        <div class="head-bar-num">
            <span>共{{policyNum}}张</span>
            <div class="filter-btn" (click)="goToFilter()">
                <i></i><span>筛选</span>
            </div>
        </div>
    </div>

</ion-header>

<ion-content class="container" (ionScroll)="scrolling()" (ionScrollStart)="scrollStart($event)" (ionScrollEnd)="scrollEnd($event)">
    <ion-refresher (ionRefresh)="pullDownRefresh($event)" [pullMax]="800">
         <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
    <!--<div class="head-bar">-->
        <!--<div class="head-bar-num">-->
            <!--<span>共{{policyNum}}条</span>-->
            <!--<div class="filter-btn" (click)="goToFilter()">-->
                <!--<i></i><span>筛选</span>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->

    <div *ngIf="(!policyList || policyList.length === 0) && isLoaded" class="no-data">
        <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
        <div class="no-data-txt">没有相关数据</div>
    </div>

    <div class="space-level"></div>
    <ion-list [virtualScroll]="policyList" [approxItemHeight]="clientItemHeight">
        <div class="content-item" *virtualItem="let data"  (click)="goToDetail(data.policyID,data.policyPayToDate,data.policyStatus,data.policyStatusCode,data.orphanType, data.agentCode)">
            <div class="item-bar">
                <span class="bar-left">保单号：{{data.policyID}}</span>
                <span class="bar-right">{{data.policyStatus}}</span>
            </div>
            <div class="item-ctt">
                <div class="flex-box">
                    <span class="ctt-left">主险名称</span>
                    <span class="ctt-right">{{data.mainRisk}}</span>
                </div>
                <div>
                    <span class="ctt-left">投保人</span>
                    <span class="ctt-right">
                        <span>{{data.policyHolder}}</span>
                        <i [class]="getSex(data.sexPolicyHolder)"></i>
                        <span class="age">{{data.agePolicyHolder}}岁</span>
                    </span>
                </div>
                <div>
                    <span class="ctt-left">被保险人</span>
                    <span class="ctt-right">
                        <span>{{data.recognizee}}</span>
                        <i [class]="getSex(data.sexRecognizee)"></i>
                        <span class="age">{{data.ageRecognizee}}岁</span>
                    </span>
                </div>
                <div>
                    <span class="ctt-left">保单生效日</span>
                    <span class="ctt-right">{{moment(data.policyValueDate*1000).format('YYYY/MM/DD')}}</span>
                </div>
                <!--<div *ngIf="data.policyStatus != '保费已缴清' && data.policyStatus != '豁免保费' && data.policyStatus != '减额缴清'">-->
                    <!--<span class="ctt-left">下期应缴保费日</span>-->
                    <!--<span class="ctt-right">{{moment(data.payment*1000).format('YYYY/MM/DD')}}</span>-->
                <!--</div>-->
                <div *ngIf="'035EFHJD'.indexOf(data.policyStatusCode) == -1 && moment(data.payment*1000).format('YYYY/MM/DD') != '1900/01/01'">
                    <span class="ctt-left">下期应缴保费日</span>
                    <span class="ctt-right">{{moment(data.payment*1000).format('YYYY/MM/DD')}}</span>
                </div>
            </div>
        </div>
    </ion-list>

    <div class="is-arrival-bottom" [ngClass]="{'bottom':isArriveBottom}" *ngIf="policyList && policyList.length > 0">
        到底了
    </div>

    <ion-fab bottom right *ngIf="policyList && policyList.length > 0" class="go-up">
        <button ion-fab (click)="goUp()" color="light">
            <img class="go-up-icon" src="./assets/images/client/client-list/icon_top.png" alt="">
        </button>
    </ion-fab>
</ion-content>
